<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的有声相册-科学家</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/base.css">
    <style>
        body {
            background: url(images/bg2.jpg) no-repeat center center fixed;
            background-size: cover;
            color: #fff;
        }

        .clearfix::after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .b,
        .b1 {
            width: 1679px;
        }

        .b:hover .box {
            margin-left: 10px;
        }

        .b:hover .box1 {
            margin-right: 0;
        }


        .b1:hover .box2 {
            margin-left: 10px;
        }

        .b1:hover .box3 {
            margin-right: 0;
        }

        .box {
            float: left;
            width: 700px;
            height: 512px;
            border-radius: 10px 30px;
            margin: 10px;
            margin-left: 135px;
            background: url(images/bg3.jpg) no-repeat center center fixed;
            background-size: cover;
            font-size: 25px;
            z-index: 2;
            transition: all .25s .1s ease-out;
        }

        img {
            float: left;
            width: 400px;
            height: 512px;
            border-radius: 10px 30px;
            transition: all .25s .1s ease-out;
        }

        img:hover {
            box-shadow: 10px 10px 30px #ffffffbf;
        }

        .box1 {
            float: right;
            width: 700px;
            height: 512px;
            border-radius: 10px 30px;
            margin-top: 10px;
            margin-right: 105px;
            background: url(images/bg4.jpg) no-repeat center center fixed;
            background-size: cover;
            font-size: 25px;
            z-index: 2;
            transition: all .25s .1s ease-out;
        }

        .box2 {
            float: left;
            width: 700px;
            height: 512px;
            border-radius: 10px 30px;
            margin: 10px;
            margin-left: 135px;
            background: url(images/bg5.jpg) no-repeat center center fixed;
            background-size: cover;
            font-size: 25px;
            transition: all .25s .1s ease-out;
        }

        .box3 {
            float: right;
            width: 700px;
            height: 512px;
            border-radius: 10px 30px;
            margin: 10px;
            margin-right: 105px;
            background: url(images/bg1.jpg) no-repeat center center fixed;
            background-size: cover;
            font-size: 25px;
            transition: all .25s .1s ease-out;
        }

    </style>
</head>

<body>
    <!-- 头部 -->
    <header>
        <em>MY AUDIO ALBUM</em>
        <ul>
            <li><a href="靓女.html" target="_blank">美女</a></li>
            <li><a href="型男.html" target="_blank">型男</a></li>
            <li><a href="科学家.html" target="_blank">科学家</a></li>
            <li><a href="https://gitee.com/hxxyyyyyy/shuzihuachengzhangkongjian.git">码云仓库</a></li>
        </ul>
    
    </header>
    <div class="clearfix b">
        <div class="box">
            <img src="images/k3.jpg" alt="" title="王德明">
            <p>
                王德民，1937年2月9日出生于河北省唐山市，油气田开发工程专家，中国油田分层开采和化学驱油技术的奠基人
            </p>
        </div>
        <div class="box1">
            <img src="images/k2.jpg" alt="">
            <p>
                继承和发扬老一辈科学家胸怀祖国、服务人民的优秀品质。长期以来，一代又一代科学家秉持深厚的爱国主义情怀，凭借精湛的学术造诣、宽广的科学视野，为祖国和人民作出了重大贡献。
            </p>
        </div>
    </div>
    <div class="b1 clearfix">
        <div class="box2">
            <img src="images/k4.jpg" alt="">
            <p>
                屠呦呦成为第一位获诺贝尔科学奖项的中国本土科学家，诺贝尔科学奖项是中国医学界迄今为止获得的最高奖项，也是中医药成果获得的最高奖项。
            </p>
        </div>
        <div class="box3">
            <img src="images/k5.jpg" alt="">
            <p>
            祖国大地上一座座科技创新的丰碑，凝结着广大院士的心血和汗水。我们的很多院士都具有“先天下之忧而忧，后天下之乐而乐”的深厚情怀，都是“干惊天动地事，做隐姓埋名人”的民族英雄！
        </div>
    </div>
</body>

</html>